import React from 'react';
import { ComponentMeta } from '@storybook/react';
// import { action } from '@storybook/addon-actions';

import AutoComplete from './autoComplete';

export default {
  title: 'Components/AutoComplete',
  component: AutoComplete,
  argTypes: {
    width: {
      description: '设置文本框的宽度',
      table: {
        type: { 
          summary: 'number', 
        },
        defaultValue: {
          summary: '-',
        }
      },
    },
    promptList: {
      description: '提示列表数据，列表较多时可左右滑动展示',
      table: {
        type: { 
          summary: 'string[]', 
        },
      },
    },
    value: {
      description: '文本框默认值',
      table: {
        type: { 
          summary: 'string', 
        },
      },
    },
    fetchSuggestions: {
      description: '获取下拉列表数据',
      table: {
        type: { 
          summary: '() => []', 
        },
      },
    },
    onSelect: {
      description: '选择下拉列表的回调',
      table: {
        type: { 
          summary: '(item) => void', 
        },
      },
    },
    onInput: {
      description: '文本框输入内容的回调',
      table: {
        type: { 
          summary: '(inputValue) => void', 
        },
      },
    },
    renderOption: {
      description: '自定义展示模板',
      table: {
        type: { 
          summary: '(item) => ReactElement', 
        },
      },
    },
    beforefix: {
      description: '文本框前缀',
      table: {
        type: { 
          summary: 'string | ReactElement', 
        },
      },
    },
    afterFix: {
      description: '文本框后缀',
      table: {
        type: { 
          summary: 'string | ReactElement', 
        },
      },
    },
    icon: {
      description: '图标，参考 fortawesome 图标库',
      table: {
        type: { 
          summary: 'string', 
        },
      },
    },
  }
} as ComponentMeta<typeof AutoComplete>;

/**
 * 默认样式
 * @returns 
 */
export const autoComplete = () => {
  const hintList = [
    {value: 'apple', id: '1'},
    {value: 'orange', id: '2'},
    {value: 'cat', id: '3'},
    {value: 'dog', id: '4'},
  ];

  const getHintList = (str: string) => {
    return hintList.filter(item => item.value.includes(str));
  };

  return (
    <>
      <AutoComplete width={300} fetchSuggestions={getHintList} />
    </>
  )
}

/**
 * 使用异步获取下拉列表
 * @returns 
 */
export const usePromise = () => {
  const fetchSuggestions = (str: string) => {
    return fetch(`https://api.github.com/search/users?q=${str}`)
        .then(res => res.json())
        .then(({ items }) => {
          return items?.slice(0, 10)?.map((item: any) => ({ value: item.login, ...item})) ?? [];
        });
  };

  return (
    <>
      <AutoComplete
        width={300}
        fetchSuggestions={fetchSuggestions}
      />
    </>
  )
}

/**
 * 展示提示列表
 * @returns 
 */
 export const showPromptList = () => {
  const fetchSuggestions = (str: string) => {
    return fetch(`https://api.github.com/search/users?q=${str}`)
        .then(res => res.json())
        .then(({ items }) => {
          return items?.slice(0, 10)?.map((item: any) => ({ value: item.login, ...item})) ?? [];
        });
  };

  const promptList = [
    { key: 1, value: 'apple' },
    { key: 2, value: 'orange' },
    { key: 3, value: 'green' },
    { key: 4, value: 'red' },
    { key: 5, value: 'yellow' },
    { key: 6, value: 'white' },
    { key: 12, value: 'black' },
    { key: 13, value: 'computer' },
    { key: 14, value: 'keyboard' },
    { key: 15, value: 'car' },
  ]

  return (
    <>
      <AutoComplete
        width={300}
        fetchSuggestions={fetchSuggestions}
        promptList={promptList}
      />
    </>
  )
}

/**
 * 展示提示列表
 * @returns 
 */
 export const showCallBack = () => {
  const fetchSuggestions = (str: string) => {
    return fetch(`https://api.github.com/search/users?q=${str}`)
        .then(res => res.json())
        .then(({ items }) => {
          return items?.slice(0, 10)?.map((item: any) => ({ value: item.login, ...item})) ?? [];
        });
  };

  const promptList = [
    { key: 1, value: 'apple' },
    { key: 2, value: 'orange' },
    { key: 3, value: 'green' },
    { key: 4, value: 'red' },
    { key: 5, value: 'yellow' },
    { key: 6, value: 'white' },
    { key: 12, value: 'black' },
    { key: 13, value: 'computer' },
    { key: 14, value: 'keyboard' },
    { key: 15, value: 'car' },
  ]

  return (
    <>
      <AutoComplete
        width={300}
        fetchSuggestions={fetchSuggestions}
        promptList={promptList}
        onSelect={(item) => console.log('select item:', item)}
        onInput={(input) => console.log('input value:', input)}
      />
    </>
  )
}